<template>
    <div class="table_list1">
        <el-table
            v-loading="loading"
            element-loading-background="rgb(0,0,0,.4)"
            :data="tableData"
            style="width: 100%"
            height="100%"
            @cell-dblclick="celldblclick"
            @current-change="changeRow"
            @row-contextmenu="handleContextMenu"
        >
            <template v-for="item in tableColumn">
                <el-table-column v-if="item.name === 'action' && (item?.if ?? true)" label="操作" :width="item.width">
                    <template slot-scope="scope">
                        <el-button v-for="i in item.buttons" v-if="i.if === undefined ? true : i.if(scope.row)" :key="i.text" type="text" :icon="i.icon" @click="() => i.click(scope.row)">
                            {{ i.text }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'filepath'" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <div v-if="scope.row.filepath === 'None'">暂无</div>
                        <a v-else :href="`/static/upload/${scope.row.filepath}`" target="_blank" style="color: #007bff">{{ scope.row.filepath }}</a>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'monp'" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <div class="monp">
                            <div v-for="(value, key) in scope.row[item.name]" :key="key" class="monp_r" :class="value == 0 ? 'monp_r' : 'monp_r  monp_g'">
                                {{ key }}
                            </div>
                            <!-- <div v-for="(value, key) in scope.row[item.name]" :key="key" class="monp_r monp_g" v-if="value =0= ">
                                {{ key }}
                            </div> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="['处理状态', '告警等级', '是否处理', '计划状态', '巡检状态', '服务状态'].includes(item.label)" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-tag size="small" effect="dark" style="border: none; padding: 0 4px; height: 20px; line-height: 20px; font-size: 14px" :color="rgba(item.color(scope.row[item.name]))">
                            {{ item.format(scope.row[item.name]) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'photo'" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-image title="点击查看大图" class="image" :src="'/static' + scope.row[item.name]" :preview-src-list="['/static' + scope.row[item.name]]">
                            <div slot="error">
                                <img class="image" src="@/assets/Device/no_img_1.png" alt />
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'dbs'" :width="item.width" :label="item.label" type="expand">
                    <template slot-scope="props" v-if="props.row['dbs'].length !== 0">
                        <div style="display: flex; height: 35px; line-height: 35px">
                            <div style="flex: 1" v-for="item in ['数据库中表名', '表内数据总数', '最新数据更新时间']" :key="item">{{ item }}</div>
                        </div>
                        <div v-for="item in props.row['dbs']" :key="item.name" style="display: flex; height: 25px; line-height: 25px">
                            <div style="flex: 1">{{ item.name | noData }}</div>
                            <div style="flex: 1">{{ item.count | noData }}</div>
                            <div style="flex: 1">{{ item.time | noData }}</div>
                        </div>
                    </template>
                    <template slot-scope="props" v-else>
                        <div>数据库中暂无对应表</div>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'obj' || item.name === 'obj1'" :width="item.width" :label="item.label">
                    <template slot-scope="props">
                        <div v-for="item in props.row[item.name]" :key="item.test" style="display: flex; height: 25px; line-height: 25px">
                            <div>{{ item.text }}：</div>
                            <div>{{ item.value | noData }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name !== 'action'" :label="item.label" :prop="item.name" :width="item.width">
                    <template slot-scope="scope">
                        <el-tooltip :disabled="item.tooltip === undefined" effect="dark" :content="item.tooltip === undefined ? '' : item.tooltip(scope.row)" placement="top">
                            <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-if="item.format">
                                {{ item.format(scope.row[item.name]) | noData }}
                            </div>
                            <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-else>
                                {{ scope.row[item.name] | noData }}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    props: {
        tableData: {
            type: Array,
            default() {
                return []
            },
        },
        tableColumn: {
            type: Array,
            default() {
                return []
            },
        },
        loading: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    methods: {
        rgba(hex) {
            hex = hex.replace('#', '')
            if (hex.length === 3) {
                hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
            }
            const r = parseInt(hex.substring(0, 2), 16)
            const g = parseInt(hex.substring(2, 4), 16)
            const b = parseInt(hex.substring(4, 6), 16)
            return `rgba(${r}, ${g}, ${b}, 0.5)`
        },
        celldblclick(row, column, cell, event) {
            if (event.type === 'dblclick' && column.property) {
                navigator.clipboard.writeText(row[column.property]).then(() => {
                    this.$message.success('复制成功')
                })
            }
        },
        handleContextMenu(row, column, event) {
            event.preventDefault()
            this.$emit('handleContextMenu', row)
        },
        changeRow(row) {
            this.$emit('changeRow', row)
        },
    },
}
</script>

<style lang="less">
.table_list1 {
    height: 100%;
    width: 100%;
    .warn_span {
        color: #f9f9f9;
        font-size: 18px;
    }

    .warn_span_1 {
        color: aqua;
    }
}

.image {
    width: 100%;
    height: 120px;
}
#textContainer {
    white-space: pre-line;
}
.monp {
    .monp_r {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        float: left;
        background-color: #e54033;
        margin-right: 2px;
    }
    .monp_g {
        background-color: #259545;
    }
}
</style>
